<template>
  <div>
    <div style="width: 100%;text-align: center;border-bottom: 1px solid #ccc;padding-bottom: 20px;margin-bottom: 30px;margin-top: 15px;"><h1>代办列表</h1></div>
    <div style="width: 100%; margin-left: 4%;">
      <el-button type="primary" @click="addThing">添加事件</el-button>
    </div>
    <div class="list">
      <div style="min-height: 629px;width: 100%;">
        <el-table ref="filterTable" :data="tableData"  style="width: 100%">
          <el-table-column align="center" label="编号" sortable width="180" column-key="id">
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="标题" width="180"></el-table-column>
          <el-table-column align="center" prop="content" label="内容" :formatter="formatter"></el-table-column>
          <el-table-column align="center" prop="datetime" label="截止日期" width="160"></el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="状态"
            width="100"
            filter-placement="bottom-end"
            :filters="[{ text: '待办', value: '待办' }, { text: '完成', value: '完成' }, { text: '删除', value: '删除' }]"
            :filter-method="filterTag"
          >
            <template slot-scope="scope">
              <el-tag :type="tageType(scope)" disable-transitions>{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click.native.prevent="update(scope.$index, tableData)" type="primary" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-drawer
        :visible.sync="drawer"
        direction="rtl">
        <slot name="title">
          <p style="text-align: center;position: relative;top: -50px;font-size: 26px;color: #666;">修改</p>
        </slot>
        <div class="drawercon">
          <div class="draweritem">
            <p class="drawertitle">标题</p>
            <el-input v-model="updateData.name" placeholder="请输入事件标题" style="width: 80%;" size="mini"></el-input>
          </div>
          <div class="draweritem">
            <p class="drawertitle">内容</p>
            <el-input v-model="updateData.content" placeholder="请输入事件内容" type="textarea" autosize style="width: 80%;" size="mini"></el-input>
          </div>
          <div class="draweritem">
            <p class="drawertitle">截止日期</p>
            <el-date-picker
              v-model="updateData.deadtime"
              type="date"
              placeholder="选择日期"
              size="mini">
            </el-date-picker>
          </div>
          <div class="draweritem">
            <p class="drawertitle">状态</p>
            <el-radio-group v-model="updateData.status" size="mini" >
              <el-radio :label="0" border>待办</el-radio>
              <el-radio :label="1" border>完成</el-radio>
            </el-radio-group>
          </div>
          <div class="buttonline">
            <el-button type="primary" @click="updateThing">保存</el-button>
            <el-button type="danger" @click="deleteThing">删除</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'list',
  props: {
    tableData: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      drawer: false,
      updateData: {}
    }
  },
  methods: {
    formatter (row, column) {
      return row.content
    },
    filterTag (value, row) {
      return row.status === value
    },
    tageType (scope) {
      var status = scope.row.status
      if (status === '待办') {
        return ''
      }
      if (status === '完成') {
        return 'success'
      }
      if (status === '删除') {
        return 'danger'
      }
    },
    update (index, row) {
      this.drawer = true
      this.updateData = Object.assign({}, {...row[index]})
      switch (this.updateData.status) {
        case '待办':
          this.updateData.status = 0
          break
        case '完成':
          this.updateData.status = 1
          break
        case '删除':
          this.updateData.status = 2
          break
      }
      console.log(this.updateData)
    },
    addThing () {
      this.drawer = true
      this.updateData = {
        content: '',
        deadtime: '',
        id: '',
        name: '',
        status: ''
      }
    },
    updateThing () {
      this.drawer = false
      if (!this.updateData.id) {
        this.updateData.id = 0
      }
      this.$emit('update', this.updateData)
    },
    deleteThing () {
      this.updateData.status = 2
      this.$emit('delete', this.updateData)
      this.drawer = false
    }
  },
  watch: {
    tableData (newval) {
      this.tableData = newval
    }
  }
}
</script>

<style scoped>
.drawercon {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  top: -30px;
}
.draweritem{
  display: flex;
  width: 95%;
  margin-left: 5%;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.drawertitle{
  margin-right: 15px;
  font-size: 18px;
  color: #555;
}
.buttonline{
  display: flex;
  width: 90%;
  margin-right: 10%;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
